<template>
  <div>
    <div v-if="dialogVisible == true">
      <el-dialog
        title="新建表单"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="cancelCreateForm"
      >
        <el-input
          placeholder="请输入表单名称"
          v-model="formInfo.formName"
          clearable
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelCreateForm">取 消</el-button>
          <el-button type="primary" @click="createForm">创建</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="dialogVisible == false">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <h1>表单名称</h1>
          <el-input
            style="width: 55%"
            v-model="formInfo.formName"
            placeholder="请输入表单名称"
          ></el-input>
          <br /><br />
          <el-switch
            v-model="formInfo.timeLimit"
            active-text="设置时限"
            inactive-text="不限时"
          >
          </el-switch>
          <br />
          <br />
          <el-switch
            v-model="formInfo.ipLimit"
            active-text="限制次数(ip限制)"
            inactive-text="不限次数"
          >
          </el-switch>
          <br />
          <br />
          <el-switch
            v-model="formInfo.allCanSee"
            active-text="填写者可查看结果"
            inactive-text="填写者不可查看结果"
          >
          </el-switch>
          <br />
          <br />
          <el-switch
            v-model="formInfo.isAnonymous"
            active-text="允许匿名填写（无需登录）"
            inactive-text="不允许匿名填写"
          >
          </el-switch>
          <br/><br/>
          <el-button type="primary" size="mini" @click="handleAddTag"> 添加标签</el-button><br/>
          <div
            v-for="(item0, index0) in tagsArray"
            :key="(item0, index0)"
          >
          <br />
            <el-input
              v-model="tagsArray[index0]"
              style="width: 15%"
            />
            <br />
          </div>
          <div class="block" v-if="formInfo.timeLimit">
            <h3>截止日期时间</h3>
            &nbsp;
            <el-date-picker
              v-model="formInfo.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择截至日期时间"
              align="right"
              :picker-options="pickerOptions0"
            >
            </el-date-picker>
          </div>
        </div>
        <!-- 题目列表 -->
        <div v-for="(item, index) in questionArray" :key="(item, index)">
          <el-card class="box-card" shadow="hover">
            <el-switch
              active-text="必做"
              inactive-text="非必做"
              v-model="item.must"
            ></el-switch>
            <br />
            <br />
            <!-- 填空题 -->
            <div v-if="item.questionType == 0">
              {{ index + 1 }}、填空题<br /><br />
              题目名&nbsp;
              <el-input
                v-model="item.questionName"
                style="width: 55%"
                placeholder="请输入题目名"
              ></el-input>
              <br />
              <br />
              <el-input
                style="width: 65%"
                type="textarea"
                placeholder="请输入内容"
              ></el-input
              >&nbsp; <br /><br />
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                @click="deleteBlank(index)"
                >删除问题
              </el-button>
              <el-button plain icon="el-icon-top" @click="UpQuestion(index)"
                >上移问题
              </el-button>
              <el-button
                plain
                icon="el-icon-bottom"
                @click="DownQuestion(index)"
                >下移问题
              </el-button>
            </div>
            <!-- 单选题 -->
            <div v-if="item.questionType == 1">
              {{ index + 1 }}、单选题&nbsp;
              <br />
              <br />
              题目名&nbsp;
              <el-input
                v-model="item.questionName"
                style="width: 55%"
                placeholder="请输入要调查的意见题目"
              ></el-input>
              <div
                v-for="(item0, index0) in item.options"
                :key="(item0, index0)"
              >
                <br />
                选项&nbsp;{{ index0 + 1 }}
                <el-input
                  v-model="item.options[index0].content"
                  placeholder="请输入选项描述"
                  style="width: 55%"
                ></el-input
                >&nbsp;
                <el-button
                  plain
                  icon="el-icon-plus"
                  @click="addOption(index, index0)"
                  >增加选项
                </el-button>
                <el-button
                  plain
                  icon="el-icon-delete"
                  @click="deleteOption(index, index0)"
                  v-if="index0 > 0"
                  >删除选项
                </el-button>
                <el-button
                  plain
                  icon="el-icon-top"
                  @click="UpOption(index, index0)"
                ></el-button>
                <el-button
                  plain
                  icon="el-icon-bottom"
                  @click="DownChoice(index, index0)"
                ></el-button>
                <br />
              </div>
              <br />
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                @click="deleteRadio(index)"
                >删除问题
              </el-button>
              <el-button plain icon="el-icon-top" @click="UpQuestion(index)"
                >上移问题
              </el-button>
              <el-button
                plain
                icon="el-icon-bottom"
                @click="DownQuestion(index)"
                >下移问题
              </el-button>
            </div>
            <!-- 多选题 -->
            <div v-if="item.questionType == 2">
              {{ index + 1 }}、多选题&nbsp;
              <span v-if="item.must">
                <el-select v-model="item.optionMin" placeholder="至少选择项数">
                  <el-option
                    v-for="item0 in item.options.length"
                    :key="item0"
                    :label="'至少选' + item0 + '项'"
                    :value="item0"
                  >
                  </el-option> </el-select
                >&nbsp;

                <el-select v-model="item.optionMax" placeholder="至多选择项数">
                  <el-option
                    v-for="item2 in item.options.length"
                    :key="item2"
                    :label="'至多选' + item2 + '项'"
                    :value="item2"
                  >
                  </el-option> </el-select
                >&nbsp;
                <el-link
                  :underline="false"
                  @click="
                    item.min = 1;
                    item.max = item.options.length;
                  "
                  >默认</el-link
                >
              </span>
              <br />
              <br />
              题目名&nbsp;
              <el-input
                v-model="item.questionName"
                style="width: 55%"
                placeholder="请输入要调查的意见题目"
              ></el-input>
              <div
                v-for="(item0, index0) in item.options"
                :key="(item0, index0)"
              >
                <br />
                选项&nbsp;{{ index0 + 1 }}
                <el-input
                  v-model="item.options[index0].content"
                  placeholder="请输入选项描述"
                  style="width: 55%"
                ></el-input
                >&nbsp;
                <el-button
                  plain
                  icon="el-icon-plus"
                  @click="addOption(index, index0)"
                  >增加选项
                </el-button>
                <el-button
                  plain
                  icon="el-icon-delete"
                  v-if="index0 > 1"
                  @click="deleteOption(index, index0)"
                  >删除选项
                </el-button>
                <el-button
                  plain
                  icon="el-icon-top"
                  @click="UpOption(index, index0)"
                ></el-button>
                <el-button
                  plain
                  icon="el-icon-bottom"
                  @click="DownOption(index, index0)"
                ></el-button>
              </div>
              <br />
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                @click="deleteCheckbox(index)"
                >删除问题
              </el-button>
              <el-button plain icon="el-icon-top" @click="UpQuestion(index)"
                >上移问题
              </el-button>
              <el-button
                plain
                icon="el-icon-bottom"
                @click="DownQuestion(index)"
                >下移问题
              </el-button>
            </div>
            <!--下拉框-->
            <div v-if="item.questionType == 3">
              {{ index + 1 }}、下拉框&nbsp;
              <br />
              <br />
              题目名&nbsp;
              <el-input
                v-model="item.questionName"
                style="width: 55%"
                placeholder="请输入要调查的意见题目"
              ></el-input>
              &nbsp;<el-select v-model="item.null" placeholder="预览">
                <el-option
                  v-for="(item0, index0) in item.options"
                  :key="(item0, index0)"
                  :label="item0.content"
                  :value="item0.content"
                >
                </el-option>
              </el-select>
              <div
                v-for="(item0, index0) in item.options"
                :key="(item0, index0)"
              >
                <br />
                选项&nbsp;{{ index0 + 1 }}
                <el-input
                  v-model="item.options[index0].content"
                  placeholder="请输入选项描述"
                  style="width: 55%"
                ></el-input
                >&nbsp;
                <el-button
                  plain
                  icon="el-icon-plus"
                  @click="addOption(index, index0)"
                  >增加选项
                </el-button>
                <el-button
                  plain
                  icon="el-icon-delete"
                  v-if="index0 > 1"
                  @click="deleteOption(index, index0)"
                  >删除选项
                </el-button>
                <el-button
                  plain
                  icon="el-icon-top"
                  @click="UpOption(index, index0)"
                ></el-button>
                <el-button
                  plain
                  icon="el-icon-bottom"
                  @click="DownOption(index, index0)"
                ></el-button>
              </div>
              <br />
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                @click="deleteListbox(index)"
                >删除问题
              </el-button>
              <el-button plain icon="el-icon-top" @click="UpQuestion(index)"
                >上移问题
              </el-button>
              <el-button
                plain
                icon="el-icon-bottom"
                @click="DownQuestion(index)"
                >下移问题
              </el-button>
            </div>
            <!--滑动条-->
            <div v-if="item.questionType == 4">
              {{ index + 1 }}、滑动条&nbsp;
              <br />
              <br />
              题目名&nbsp;
              <el-input
                v-model="item.questionName"
                style="width: 55%"
                placeholder="请输入要调查的意见题目"
              ></el-input>
              <el-slider :min="0" :max="100" style="width: 55%"></el-slider>
              设置最小值&nbsp;
              <el-input
                v-model="item.slideMin"
                style="width: 55%"
                placeholder="请输入最小值"
              ></el-input>
              <br />
              <br />
              设置最大值&nbsp;
              <el-input
                v-model="item.slideMax"
                style="width: 55%"
                placeholder="请输入最大值"
              ></el-input>
              <br /><br />
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                @click="deleteSlide(index)"
                >删除问题
              </el-button>
              <el-button plain icon="el-icon-top" @click="UpQuestion(index)"
                >上移问题
              </el-button>
              <el-button
                plain
                icon="el-icon-bottom"
                @click="DownQuestion(index)"
                >下移问题
              </el-button>
            </div>
            <!--起止日期时间-->
            <div v-if="item.questionType == 5">
              {{ index + 1 }}、起止日期时间&nbsp;
              <br />
              <br />
              题目名&nbsp;
              <el-input
                v-model="item.questionName"
                style="width: 55%"
                placeholder="请输入要调查的意见题目"
              ></el-input>
              <br />
              <br />
              <div class="block">
                <span class="demonstration">预览</span>&nbsp;
                <el-date-picker
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                >
                </el-date-picker>
              </div>
              <br /><br />
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                @click="deleteDateTime(index)"
                >删除问题
              </el-button>
              <el-button plain icon="el-icon-top" @click="UpQuestion(index)"
                >上移问题
              </el-button>
              <el-button
                plain
                icon="el-icon-bottom"
                @click="DownQuestion(index)"
                >下移问题
              </el-button>
            </div>
          </el-card>
          <br />
        </div>
        <el-button
          class="el-icon-plus"
          :underline="false"
          @click="addBlank"
          size="small"
          type="primary"
          >填空题 </el-button
        >&nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          @click="addRadio()"
          >单选题 </el-button
        >&nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          @click="addCheckbox"
          >多选题 </el-button
        >&nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          @click="addListbox"
          >下拉框 </el-button
        >&nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          @click="addSlider"
          >滑动条
        </el-button>
        &nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          @click="addDateTime"
          >起止日期时间
        </el-button>
        &nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          >评分题
        </el-button>
        &nbsp;
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          >判断题
        </el-button>
        <el-button
          size="small"
          type="primary"
          class="el-icon-plus"
          :underline="false"
          >单个日期时间
        </el-button>
      </el-card>
      <br />
      <el-button type="success" icon="el-icon-s-promotion" @click="submitForm"
        >发布表单
      </el-button>
    </div>
  </div>
</template>

<script>
//导入接口
import { nanoid } from "nanoid"; //生成id的接口
import { creatForm } from "@/api/forms/diy.js"; //新建表单的接口
import { reviseForm } from "@/api/forms/diy.js"; //更新表单的接口

import { addBlank } from "@/api/forms/diy.js"; //增加填空题的接口
import { reviseBlank } from "@/api/forms/diy.js"; //修改填空题的接口
import { deleteBlank } from "@/api/forms/diy.js"; //删除选择题的接口

import { addRadio } from "@/api/forms/diy.js"; //增加单选题的接口
import { reviseRadio } from "@/api/forms/diy.js"; //修改单选题的接口
import { deleteRadio } from "@/api/forms/diy.js"; //删除单选题的接口

import { addCheckbox } from "@/api/forms/diy.js"; //增加多选题的接口
import { reviseCheckbox } from "@/api/forms/diy.js"; //修改多选题的接口
import { deleteCheckbox } from "@/api/forms/diy.js"; //删除多选题的接口

import { addListbox } from "@/api/forms/diy.js"; //增加下拉菜单的接口
import { reviseListbox } from "@/api/forms/diy.js"; //修改下拉菜单的接口
import { deleteListbox } from "@/api/forms/diy.js"; //删除下拉菜单的接口

import { addOption } from "@/api/forms/diy.js"; //增加选项的接口
import { reviseOption } from "@/api/forms/diy.js"; //修改选项的接口
import { deleteOption } from "@/api/forms/diy.js"; //删除选项的接口

import { addSlide } from "@/api/forms/diy.js"; //增加滑动条的接口
import { reviseSlide } from "@/api/forms/diy.js"; //修改滑动条的接口
import { deleteSlide } from "@/api/forms/diy.js"; //删除滑动条的接口

import { addDateTime } from "@/api/forms/diy.js"; //增加日期时间选择的接口
import { reviseDateTime } from "@/api/forms/diy.js"; //修改日期时间选择的接口
import { deleteDateTime } from "@/api/forms/diy.js"; //删除日期时间选择的接口

import { addRate } from "@/api/forms/diy.js"; //增加评分题的接口
import { reviseRate } from "@/api/forms/diy.js"; //修改评分题的接口
import { deleteRate } from "@/api/forms/diy.js"; //删除评分题的接口

import { submitForm } from "@/api/forms/newform.js";
export default {
  data() {
    return {
      dialogVisible: true,
      tagsArray:[],
      formInfo: {
        id: null,
        userId: this.$store.state.user.id,
        formName: null,
        formInfo: null,
        counts: 0,
        formStatus: 0,
        formUrl: null,
        createTime: null,
        timeLimit: false,
        beginTime: null,
        endTime: null,
        formPassword: null,
        ipLimit: false,
        isAnonymous: false,
        departmentId: null,
        tags: '',
        allCanSee: false,
      },
      questionArray: [], //所有题目数组
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
          },
          {
            text: "最近一个月",
          },
          {
            text: "最近三个月",
          },
        ],
      },
      pickerOptions0: {
        shortcuts: [
          {
            text: "一周后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "两周后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 14);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一个月后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    //type: 0填空题 1单选题 2多选题 3下拉 4滑动 5日期时间 6评分
    //新建表单
    createForm() {
      //生成随机表单id
      this.formInfo.id = nanoid();
      //根据id生成url
      this.formInfo.formUrl =
        "http://localhost/forms/write/?formId=" + this.formInfo.id;
      //生成创建时间
      this.formInfo.createTime = this.parseTime(new Date());
      //打包数据
      var params = {
        id: this.formInfo.id,
        userId: this.formInfo.userId,
        formName: this.formInfo.formName,
        formInfo: this.formInfo.formInfo,
        counts: this.formInfo.counts,
        formStatus: this.formInfo.formStatus,
        formUrl: this.formInfo.formUrl,
        createTime: this.formInfo.createTime,
        timeLimit: this.formInfo.timeLimit,
        beginTime: this.formInfo.beginTime,
        endTime: this.formInfo.endTime,
        formPassword: this.formInfo.formPassword,
        ipLimit: this.formInfo.ipLimit,
        tags: this.formInfo.tags,
        isAnonymous: this.formInfo.isAnonymous,
        departmentId: this.formInfo.departmentId,
        allCanSee: this.formInfo.allCanSee,
      };
      //调用接口，新建表单
      creatForm(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "新建表单成功",
            type: "success",
          });
          this.dialogVisible = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //添加标签
    handleAddTag(){
      this.tagsArray.push("标签");
      this.formInfo.tags='';
      for (var i = 0; i < this.tagsArray.length; i++) {
        this.formInfo.tags += this.tagsArray[i];
        if (i != this.tagsArray.length - 1) {
          this.formInfo.tags += ",";
        }
      }
    },  
    //取消新建表单
    cancelCreateForm() {
      //返回上一页
      this.$router.go(-1);
    },
    //更新表单信息
    reviseForm() {
      //打包数据
      var params = {
        id: this.formInfo.id,
        userId: this.formInfo.userId,
        formName: this.formInfo.formName,
        formInfo: this.formInfo.formInfo,
        counts: this.formInfo.counts,
        formStatus: this.formInfo.formStatus,
        formUrl: this.formInfo.formUrl,
        createTime: this.formInfo.createTime,
        timeLimit: this.formInfo.timeLimit,
        beginTime: this.formInfo.beginTime,
        endTime: this.formInfo.endTime,
        formPassword: this.formInfo.formPassword,
        ipLimit: this.formInfo.ipLimit,
        tags: this.formInfo.tags,
        isAnonymous: this.formInfo.isAnonymous,
        departmentId: this.formInfo.departmentId,
        allCanSee: this.formInfo.allCanSee,
      };
      //调用接口
      reviseForm(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改表单信息成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加填空题
    addBlank() {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: true,
        questionName: "",
        questionType: 0,
        questionInfo: "",
      };
      //调用接口，保存答案
      addBlank(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加填空题成功",
            type: "success",
          });
          this.formInfo.counts++;
          this.questionArray.push(params);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改填空题
    reviseBlank(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id,
        formId: this.formInfo.id,
        orderId: this.questionArray[i].orderId,
        must: this.questionArray[i].must,
        questionName: this.questionArray[i].questionName,
        questionType: 0,
        questionInfo: this.questionArray[i].questionInfo,
      };
      //调用接口
      reviseBlank(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改填空题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除填空题
    deleteBlank(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id, //表单id
      };
      //调用接口，新建表单
      deleteBlank(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除填空题成功",
            type: "success",
          });
          this.formInfo.counts--;
          this.questionArray.splice(i, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加单选题
    addRadio() {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: true,
        questionName: "",
        questionType: 1,
        questionInfo: "",
      };
      //调用接口，保存答案
      addRadio(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加单选题成功",
            type: "success",
          });
          this.formInfo.counts++; //题目数增加
          this.questionArray.push(params); //填充问题数组
          this.$set(
            this.questionArray[this.formInfo.counts - 1],
            "options",
            []
          ); //增加选项字段
          this.addOption(this.formInfo.counts - 1, -1); //增加一个选择题
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改单选题
    reviseRadio(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id,
        formId: this.formInfo.id,
        orderId: this.questionArray[i].orderId,
        must: this.questionArray[i].must,
        questionName: this.questionArray[i].questionName,
        questionType: 1,
        questionInfo: this.questionArray[i].questionInfo,
      };
      //调用接口，保存答案
      reviseRadio(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改单选题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除单选题
    deleteRadio(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id, //表单id
      };
      //调用接口
      deleteRadio(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除单选题成功",
            type: "success",
          });
          //删除问题对应的的选项
          for (var j = this.questionArray[i].options.length; j > 0; j--) {
            this.deleteOption(i, j - 1);
          }
          this.formInfo.counts--;
          this.questionArray.splice(i, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加多选题
    addCheckbox() {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: true,
        questionName: "",
        questionType: 2,
        questionInfo: "",
        optionMin: 1,
        optionMax: 2,
      };
      this.formInfo.counts++; //题目数增加
      this.questionArray.push(params); //填充问题数组
      this.$set(this.questionArray[this.formInfo.counts - 1], "options", []); //增加选项字段
      //增加两个选择题
      this.addOption(this.formInfo.counts - 1, -1);
      this.addOption(this.formInfo.counts - 1, 0);
      //调用接口，保存答案
      addCheckbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加多选题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改多选题
    reviseCheckbox(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id,
        formId: this.formInfo.id,
        orderId: this.questionArray[i].orderId,
        must: this.questionArray[i].must,
        questionName: this.questionArray[i].questionName,
        questionType: 2,
        questionInfo: this.questionArray[i].questionInfo,
        optionMin: this.questionArray[i].optionMin,
        optionMax: this.questionArray[i].optionMax,
      };
      //调用接口，保存答案
      reviseCheckbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改多选题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除多选题
    deleteCheckbox(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id, //表单id
      };
      //调用接口
      deleteCheckbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除多选题成功",
            type: "success",
          });
          //删除问题对应的的选项
          for (var j = this.questionArray[i].options.length; j > 0; j--) {
            this.deleteOption(i, j - 1);
          }
          this.formInfo.counts--;
          this.questionArray.splice(i, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加下拉框
    addListbox() {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: true,
        questionName: "",
        questionType: 3,
        questionInfo: "",
      };
      //调用接口
      addListbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加下拉框成功",
            type: "success",
          });
          this.formInfo.counts++;
          this.questionArray.push(params);
          this.$set(
            this.questionArray[this.formInfo.counts - 1],
            "options",
            []
          ); //增加选项字段
          this.addOption(this.formInfo.counts - 1, -1); //增加一个选择题
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改下拉框
    reviseListbox(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id,
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: this.questionArray[i].must,
        questionName: this.questionArray[i].questionName,
        questionType: 3,
        questionInfo: this.questionArray[i].questionInfo,
      };
      //调用接口
      reviseListbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改下拉框成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除下拉框
    deleteListbox(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id, //表单id
      };
      //调用接口
      deleteListbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除下拉框成功",
            type: "success",
          });
          //删除问题对应的的选项
          for (var j = this.questionArray[i].options.length; j > 0; j--) {
            this.deleteOption(i, j - 1);
          }
          this.formInfo.counts--;
          this.questionArray.splice(i, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加选项
    addOption(i, j) {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        questionId: this.questionArray[i].id,
        optType: 0,
        content: "",
        orderId: this.questionArray[i].options.length + 1,
      };
      //调用接口，保存答案
      addOption(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加选项成功",
            type: "success",
          });
          this.questionArray[i].options.splice(j + 1, 0, params); //在j后面增加一个选项
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改选项
    reviseOption(i, j) {
      //打包数据
      var params = {
        id: this.questionArray[i].options[j].id,
        formId: this.formInfo.id,
        questionId: this.questionArray[i].id,
        optType: this.questionArray[i].options[j].optType,
        content: this.questionArray[i].options[j].content,
        orderId: this.questionArray[i].options.length + 1,
      };
      //调用接口，保存答案
      reviseOption(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改选项成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除选项
    deleteOption(i, j) {
      //打包数据
      var params = {
        id: this.questionArray[i].options[j].id,
      };
      //调用接口，保存答案
      deleteOption(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除选项成功",
            type: "success",
          });
          this.questionArray[i].options.splice(j, 1); //前端删除选项
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加滑动条
    addSlider() {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: true,
        questionName: "",
        questionType: 4,
        questionInfo: "",
        slideMin: 0,
        slideMax: 100,
      };
      //调用接口
      addSlide(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加滑动条成功",
            type: "success",
          });
          this.formInfo.counts++;
          this.questionArray.push(params);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改滑动条
    reviseSlide(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id,
        formId: this.formInfo.id,
        orderId: this.questionArray[i].orderId,
        must: this.questionArray[i].must,
        questionName: this.questionArray[i].questionName,
        questionType: 4,
        questionInfo: this.questionArray[i].questionInfo,
        slideMin: this.questionArray[i].slideMin,
        slideMax: this.questionArray[i].slideMax,
      };
      //调用接口
      reviseSlide(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改滑动条成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除滑动条
    deleteSlide(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id, //问题id
      };
      //调用接口，新建表单
      deleteSlide(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除滑动条成功",
            type: "success",
          });
          this.formInfo.counts--;
          this.questionArray.splice(i, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加日期时间选择
    addDateTime() {
      //打包数据
      var params = {
        id: nanoid(),
        formId: this.formInfo.id,
        orderId: this.formInfo.counts + 1,
        must: true,
        questionName: "",
        questionType: 5,
        questionInfo: "",
      };
      //调用接口
      addDateTime(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "增加日期时间选择成功",
            type: "success",
          });
          this.formInfo.counts++;
          this.questionArray.push(params);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改日期时间选择
    reviseDateTime(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id,
        formId: this.formInfo.id,
        orderId: this.questionArray[i].orderId,
        must: this.questionArray[i].must,
        questionName: this.questionArray[i].questionName,
        questionType: 5,
        questionInfo: this.questionArray[i].questionInfo,
      };
      //调用接口
      reviseDateTime(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改日期时间选择成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除日期时间选择
    deleteDateTime(i) {
      //打包数据
      var params = {
        id: this.questionArray[i].id, //表单id
      };
      //调用接口，新建表单
      deleteDateTime(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "删除日期时间选择成功",
            type: "success",
          });
          this.formInfo.counts--;
          this.questionArray.splice(i, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //增加评分题
    addRate() {
      this.formInfo.counts++;
      this.questionArray.push({
        type: 6,
        index: this.formInfo.counts,
        question: "",
        must: true,
      });
    },
    // //选项上移
    // UpOption(i, j) {
    //     if (j == 0) {
    //         return;
    //     } else if (j > 0) {
    //         this.questionArray[i].choice[j] = this.questionArray[
    //             i
    //         ].choice.splice(j - 1, 1, this.questionArray[i].choice[j])[0];
    //         return;
    //     }
    // },
    // //选项下移
    // DownChoice(i, j) {
    //     if (j == this.questionArray[i].choice.length - 1) {
    //         return;
    //     } else {
    //         this.questionArray[i].choice[j] = this.questionArray[
    //             i
    //         ].choice.splice(j + 1, 1, this.questionArray[i].choice[j])[0];
    //         return;
    //     }
    // },
    //上移问题
    UpQuestion(i) {
      if (i == 0) {
      } else if (i > 0) {
        this.questionArray[i] = this.questionArray.splice(
          i - 1,
          1,
          this.questionArray[i]
        )[0];
      }
    },
    //下移问题
    DownQuestion(i) {
      if (i == this.questionArray.length - 1) {
      } else if (i != this.questionArray.length - 1) {
        this.questionArray[i] = this.questionArray.splice(
          i + 1,
          1,
          this.questionArray[i]
        )[0];
      }
    },
    //测试函数
    test(picker) {
      picker.$emit("pick", new Date());
    },
    //发布表单
    submitForm() {
      var params = {
        formId: this.formInfo.id,
        formStatus: 1,
      };
      submitForm(params)
        .then((response) => {
          this.$message({
            message: "发布表单成功",
            type: "success",
          });
          this.$router.push({ path: "/forms/ipublish" });
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  //数据加工
  computed: {
    qArray() {
      return JSON.parse(JSON.stringify(this.questionArray));
    },
    fInfo() {
      return JSON.parse(JSON.stringify(this.formInfo));
    },
    tArray(){
      return JSON.parse(JSON.stringify(this.tagsArray));
    }
  },
  //监听
  watch: {
    //监听表单标签
    tArray: {
      handler(newVal, oldVal) {
        //防止新增冲突
        if(newVal.length!=oldVal.length){
          return;
        }
        //精确到内容修改
        this.formInfo.tags='';
        for (var i = 0; i < this.tagsArray.length; i++) {
          this.formInfo.tags += this.tagsArray[i];
          if (i != this.tagsArray.length - 1) {
            this.formInfo.tags += ",";
          }
        }
      },
      deep: true,
    },
    //监听表单信息
    fInfo: {
      handler(newVal, oldVal) {
        //截至日期设置有误
        if (newVal.timeLimit == true && newVal.endTime != oldVal.endTime) {
          console.log(oldVal.endTime);
          if (newVal.endTime < this.parseTime(new Date())) {
            this.$message({
              message: "请设置正确的表单截止时间",
              type: "warning",
            });
            this.formInfo.endTime = this.parseTime(new Date());
            return;
          } else {
            this.reviseForm();
            return;
          }
        }
        //防止在创建表单时更新表单，发生冲突
        if (newVal.id != null && oldVal.id != null) {
          this.reviseForm();
        }
      },
      deep: true,
    },
    //监听表单内容，动态往后端发送请求保存表
    qArray: {
      //难点：实现精确异常，判断整个对象是不精确的，只有判断某一确定字段才是精确的
      handler(newVal, oldVal) {
        //题目数变更，不理睬
        if (newVal.length != oldVal.length) {
          return;
        }
        //选项数数变更，不理睬
        for (var i = 0; i < newVal.length; i++) {
          if (
            newVal[i].questionType == 1 ||
            newVal[i].questionType == 2 ||
            newVal[i].questionType == 3
          ) {
            if (newVal[i].options.length != oldVal[i].options.length) {
              return;
            }
          }
        }
        //内容变更，理睬
        //公有变更：是否必填、问题名
        for (var i = 0; i < newVal.length; i++) {
          if (
            newVal[i].must != oldVal[i].must ||
            newVal[i].questionName != oldVal[i].questionName
          ) {
            switch (newVal[i].questionType) {
              case 0: //填空题
                this.reviseBlank(i); //修改填空题
                return;
              case 1: //单选题
                this.reviseRadio(i); //题目内容变更了
                return;
              case 2: //多选题
                this.reviseCheckbox(i); //题目内容变更了
                return;
              case 3: //下拉题
                this.reviseListbox(i); //题目内容变更了
                return;
              case 4: //滑动条
                this.reviseSlide(i); //题目内容变更了
                return;
              case 5: //日期时间选择
                this.reviseDateTime(i); //题目内容变更了
                return;
              default:
                return;
            }
          }
        }
        //带选项题层次较深特殊处理，目前只监听选项名
        for (var i = 0; i < newVal.length; i++) {
          switch (newVal[i].questionType) {
            case 1: //单选题
              for (var j = 0; j < newVal[i].options.length; j++) {
                //选项内容变更了
                if (
                  newVal[i].options[j].content != oldVal[i].options[j].content
                ) {
                  //选项名改变了
                  this.reviseOption(i, j);
                  return;
                }
              }
              break;
            case 2: //多选题
              if (
                newVal[i].optionMin != oldVal[i].optionMin ||
                newVal[i].optionMax != oldVal[i].optionMax
              ) {
                //最大项数和最小项数变更
                if (newVal[i].optionMin > newVal[i].optionMax) {
                  this.$message({
                    message: "请设置正确的选项数限制",
                    type: "warning",
                  });
                  this.questionArray[i].optionMin =
                    this.questionArray[i].optionMax;
                  return;
                } else {
                  this.reviseCheckbox(i, j);
                  return;
                }
              }
              for (var j = 0; j < newVal[i].options.length; j++) {
                //选项内容变更了
                if (
                  newVal[i].options[j].content != oldVal[i].options[j].content
                ) {
                  //选项名改变了
                  this.reviseOption(i, j);
                  return;
                }
              }
              break;
            case 3: //下拉题
              for (var j = 0; j < newVal[i].options.length; j++) {
                //选项内容变更了
                if (
                  newVal[i].options[j].content != oldVal[i].options[j].content
                ) {
                  //选项名改变了
                  this.reviseOption(i, j);
                  return;
                }
              }
              break;
            case 4: //滑动条
              if (
                newVal[i].slideMin != oldVal[i].slideMin ||
                newVal[i].slideMax != oldVal[i].slideMax
              ) {
                //最大值和最小值变更
                if (newVal[i].slideMin > newVal[i].slideMax) {
                  this.$message({
                    message: "请设置正确的滑动范围",
                    type: "warning",
                  });
                  this.questionArray[i].slideMin =
                    this.questionArray[i].slideMax;
                  return;
                } else {
                  this.reviseSlide(i, j);
                  return;
                }
              }
              break;
            default:
              break;
          }
        }
      },
      deep: true,
    },
  },
};
</script>
